<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';

// 接收 props
const props = defineProps({
  text: {
    type: [String, undefined],
    required: true,
  },
  size: {
    type: Number,
    default: 300, // 默认二维码尺寸
  },
  level: {
    type: String,
    default: 'H', // 设置高容错级别
    validator: (value) => ['L', 'M', 'Q', 'H'].includes(value),
  },
  logoUrl: {
    type: String,
    default: '',
  },
  logoSize: {
    type: Number,
    default: 60, // 默认 logo 尺寸（相对于二维码的大小）
  },
});

// 获取 canvas 的引用
const canvas = ref(null);

// 生成二维码的方法
const generateQRCode = async () => {
  if (!canvas.value) return;
  try {
    // 先生成二维码的 canvas
    await QRCode.toCanvas(canvas.value, props.text, {
      width: props.size,
      errorCorrectionLevel: props.level, // 设置高容错级别
    });

    // 获取二维码的上下文
    const ctx = canvas.value.getContext('2d');

    // 如果有 logo 图片，绘制到二维码中心
    if (props.logoUrl) {
      const logo = new Image();
      logo.src = props.logoUrl;

      logo.onload = () => {
        // 设置 logo 最大尺寸（避免 logo 过大）
        const logoMaxSize = Math.min(props.size / 4, props.logoSize); // 最大不超过二维码宽度的四分之一
        const logoSize = Math.max(logoMaxSize, 40); // 防止 logo 太小

        // 计算 logo 的位置，居中显示
        const x = (props.size - logoSize) / 2;
        const y = (props.size - logoSize) / 2;

        // 留白区域，二维码中心会清空，确保有足够空白给 logo
        const padding = 115; // 空白区域的大小
        const innerSize = props.size - padding * 2; // 内部二维码区域的大小

        // 在二维码中间绘制透明的背景区域，用于放置 logo
        ctx.clearRect(padding, padding, innerSize, innerSize);

        // 绘制 logo 到二维码的中心，确保 logo 的大小不会太大，避免覆盖重要的二维码区域
        ctx.drawImage(logo, x, y, logoSize, logoSize);
      };
    }
  } catch (error) {
    console.error('二维码生成失败:', error);
  }
};

// 在组件挂载时生成二维码
onMounted(generateQRCode);
</script>

<style scoped>
canvas {
  display: block;
  margin: auto;
}
</style>
